<template>
    <teleport to=".header">
        <SdyHeader center="search"></SdyHeader>
    </teleport>

    <van-list v-model:loading="loading" :finished="false" finished-text="没有更多了">
        <div @click="$myRouter.push({ path: '/detail', query: { proid: item.proid } })" v-for="item in GoodsList"
            :key="item.proid">
            <div class="list">
                <div class="img">
                    <img :src="item.img1" alt="">
                </div>
                <div class="content">
                    <p class="p1">{{ item.proname }}</p>
                    <p class="p2">&yen; {{ item.originprice }}</p>
                    <p class="p3">50万+好评 好评率96%</p>
                </div>
            </div>
        </div>
    </van-list>
</template>

<script name="sdyList" lang="ts" setup>
import SdyHeader from '../../components/header.vue'
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted } from 'vue'
import { getSearchList } from '../../model/goods';

// 路由
const $myRoute = useRoute()
const $myRouter = useRouter()

// 接口
interface GoodsListInfo {
    img1?: string
    proname?: string
    originprice?: number
    proid?: string
}

// 获取商品列表
const GoodsList = ref<Array<GoodsListInfo>>([])

const loading = ref<boolean>(true)


// 发送请求
const getGoodsList = async () => {
    const keyword = $myRoute.query.keyword as string
    const res = await getSearchList(keyword)
    if ((res as any).code !== '200') return
    GoodsList.value = res.data
    console.log(res);
}

// 渲染
onMounted(() => {
    getGoodsList()
})
</script>

<style scoped lang="scss">
.list {
    height: 100px;
    width: 100%;
    display: flex;
    padding: 5px;
    box-sizing: border-box;

    >.img {
        width: 100px;
        height: 100%;

        >img {
            width: 100%;
            height: 100%;
        }
    }

    >.content {
        width: 250px;
        padding: 5px;
        font-size: 14px;

        >.p1 {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
        }

        >.p2 {
            color: red;
            margin-top: 20px;
        }

        >.p3 {
            color: #ccc;
            font-size: 12px;
            margin-top: 10px;
        }
    }
}
</style>